<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>验证码测试页面</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 600px;
            margin: 50px auto;
            padding: 20px;
        }
        .captcha-container {
            border: 1px solid #ddd;
            border-radius: 8px;
            padding: 20px;
            margin: 20px 0;
            background-color: #f9f9f9;
        }
        .captcha-image {
            border: 1px solid #ccc;
            cursor: pointer;
        }
        button {
            background-color: #007bff;
            color: white;
            border: none;
            padding: 8px 16px;
            border-radius: 4px;
            cursor: pointer;
            margin: 5px;
        }
        button:hover {
            background-color: #0056b3;
        }
        input {
            padding: 8px;
            border: 1px solid #ddd;
            border-radius: 4px;
            margin: 5px;
        }
    </style>
</head>
<body>
    <h1>图片验证码测试</h1>
    
    <div class="captcha-container">
        <h3>验证码图片</h3>
        <img id="captchaImage" class="captcha-image" src="/lulu/api/auth/image_codes" alt="验证码" title="点击刷新">
        <br><br>
        <button onclick="refreshCaptcha()">刷新验证码</button>
        <br><br>
        <label for="captchaInput">请输入验证码：</label>
        <input type="text" id="captchaInput" maxlength="4" placeholder="输入4位数字">
        <button onclick="validateCaptcha()">验证</button>
        <div id="result" style="margin-top: 10px;"></div>
    </div>

    <div class="captcha-container">
        <h3>使用说明</h3>
        <ul>
            <li><strong>生成验证码：</strong><code>GET /lulu/api/auth/image_codes</code></li>
            <li><strong>验证验证码：</strong><code>POST /lulu/api/auth/verify_captcha</code></li>
            <li>每次请求都会生成新的4位数字验证码</li>
            <li>图片包含干扰线和干扰点提高安全性</li>
            <li>验证码存储在session中，有效期5分钟</li>
            <li>验证码一次性使用，验证后自动失效</li>
            <li>点击图片或刷新按钮可以获取新的验证码</li>
            <li>支持服务器端验证，确保安全性</li>
        </ul>
    </div>

    <div class="captcha-container">
        <h3>API接口说明</h3>
        <h4>1. 获取验证码图片</h4>
        <pre><code>GET /lulu/api/auth/image_codes
返回: PNG图片数据
说明: 生成4位数字验证码图片，验证码自动存储到session中</code></pre>
        
        <h4>2. 验证验证码</h4>
        <pre><code>POST /lulu/api/auth/verify_captcha
Content-Type: application/json
Body: {"code": "1234"}

返回示例:
成功: {"code": 200, "success": true, "message": "验证码验证成功"}
失败: {"code": 400, "success": false, "message": "验证码错误"}</code></pre>
    </div>

    <script>
        // 刷新验证码
        function refreshCaptcha() {
            const img = document.getElementById('captchaImage');
            // 添加时间戳避免缓存
            img.src = '/lulu/api/auth/image_codes?' + new Date().getTime();
        }

        // 点击图片刷新验证码
        document.getElementById('captchaImage').addEventListener('click', refreshCaptcha);

        // 验证码验证
        async function validateCaptcha() {
            const input = document.getElementById('captchaInput').value;
            const result = document.getElementById('result');
            
            if (input.length !== 4) {
                result.innerHTML = '<span style="color: red;">请输入4位数字</span>';
                return;
            }

            if (!/^\d{4}$/.test(input)) {
                result.innerHTML = '<span style="color: red;">只能输入数字</span>';
                return;
            }

            try {
                const response = await fetch('/lulu/api/auth/verify_captcha', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                    },
                    body: JSON.stringify({ code: input })
                });

                const data = await response.json();
                
                if (data.success) {
                    result.innerHTML = '<span style="color: green;">✓ 验证码验证成功！</span>';
                    document.getElementById('captchaInput').value = '';
                    // 验证成功后自动刷新验证码
                    setTimeout(refreshCaptcha, 1000);
                } else {
                    result.innerHTML = `<span style="color: red;">✗ ${data.message}</span>`;
                }
            } catch (error) {
                result.innerHTML = '<span style="color: red;">验证失败，请稍后重试</span>';
                console.error('验证码验证错误:', error);
            }
        }

        // 自动刷新验证码（每30秒）
        setInterval(refreshCaptcha, 30000);
    </script>
</body>
</html> 